<template>
	<view>
		<view class="head-bac">
			<view style="width: 1rpx;" :style="{height:70+perch+'px'}"></view>
			<view style="position: fixed;top: 0; z-index: 98;width: 100%; background-color: #E4F5F2;">
				<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">Hello！芝士桃桃</view>
				<view class="head-city">
					<view class="city">郑州市</view>
					<view class="greet">欢迎使用自助台球</view>
				</view>
			</view>
			
			<view class="swiper">
				<u-swiper radius="12" height='130' :list="list1" @change="change" @click="click"></u-swiper>
			</view>
		</view>
		
		<view class="card-box">
			<view class="card-each card-bac1" @click="assistant">
				<image class="card-bac" src="../../static/index/card1-bac.png" mode=""></image>
				<view class="card-left">
					<view class="card-name">助教</view>
					<view class="card-text">让运动更简单</view>
				</view>
			</view>
			<view class="card-each card-bac2">
				<image class="card-bac" src="../../static/index/card2-bac.png" mode=""></image>
				<view class="card-left">
					<view class="card-name">推荐返券</view>
					<view class="card-text">点击查看详情</view>
				</view>
			</view>
		</view>
		
		<!-- 本地门店 -->
		<view class="shopTitle">本地门店</view>
		<view class="shop-list-box">
			<view class="shop-each" v-for="i in 5" @click="toDetail">
				<view class="shop-img"></view>
				<view class="shop-info">
					<view class="shop-name">店铺名·24H自助台球(红旗路店)</view>
					<view class="shop-site">
						<text class="site">金水区经八路街道广厦金水区经八路街道广厦</text>
						<text class="juli">2.83km</text>
					</view>
					<view class="businessHours">
						<text class="time">营业时间：00:00-24:00</text>
						<text class="yy-state">营业中</text>
					</view>
					<view class="shop-icons">
						<image class="icon" src="../../static/index/place.png" mode=""></image>
						<image class="icon" src="../../static/index/wx.png" mode=""></image>
						<image class="icon" src="../../static/index/mobile.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="kefu">
			
		</view>
		
		<view style="height: 160rpx;width: 1rpx;"></view>
		<tabbar :current-page="0"></tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuH: this.$menuH || '',
			safeTop: this.$safeTop || 20 + 'px',
			perch:uni.getStorageSync('perch'),
			list1: ['https://cdn.uviewui.com/uview/swiper/swiper1.png']
		};
	},
	onLoad() {},
	methods: {
		//跳转助教
		assistant(){
			// uni.navigateTo({
			// 	url:'/pages/assistant/assistant'
			// })
			this.$skip('/pages/assistant/assistant')
		},
		toDetail(){
			uni.navigateTo({
				url: '/pages/shopDetail/shopDetail',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}
.head-bac {
	width: 750rpx;
	// height: 524rpx;
	background: linear-gradient(to bottom, #e3f5f2,#e3f5f2, #f0f8fa, #F7F8FA);

	.head-name {
		padding-left: 32rpx;
		font-weight: 800;
		font-size: 40rpx;
		color: #1c274c;
	}
	.head-city {
		display: flex;
		padding: 13rpx 0 8rpx 32rpx;
		.city {
			// width: 102rpx;
			padding: 0 14rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #4bc264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
		}
		.greet {
			font-weight: 500;
			font-size: 26rpx;
			color: #6b738b;
			padding-left: 16rpx;
		}
	}
	.swiper {
		width: 686rpx;
		// height: 260rpx;
		margin: auto;
		margin-top: 35rpx;
	}
}

.card-box {
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx;
	margin-top: 32rpx;
	.card-each {
		// width: 283rpx;
		// height: 148rpx;
		width: 331rpx;
		height: 168rpx;
		
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: relative;
		.card-left {
			position: relative;
			padding: 32rpx 24rpx 0 24rpx;
			.card-name {
				font-weight: 800;
				font-size: 30rpx;
				color: #3B5E51;
			}
			.card-text {
				font-weight: 500;
				font-size: 20rpx;
				color: rgba(59,94,81,0.5);
				margin-top: 16rpx;
			}
		}
		.card-bac {
			width: 331rpx;
			height: 168rpx;
			position: absolute;
		}
	}
	.card-bac1 {
		background: linear-gradient( 180deg, #D0F8E7 0%, #EAFCF4 100%);
	}
	.card-bac2 {
		background: linear-gradient( 180deg, #F3E3E2 0%, #F5F1F2 100%);
	}
}

// 本地门店
.shopTitle {
	font-weight: 800;
	font-size: 30rpx;
	color: #1C274C;
	padding: 40rpx 0 0 32rpx;
}

.shop-list-box {
	.shop-each {
		width: 638rpx;
		margin: auto;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		.shop-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background-color: #4bc264;
		}
		.shop-info {
			margin-left: 24rpx;
			.shop-name {
				font-weight: bold;
				font-size: 28rpx;
				color: #1C274C;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.shop-site {
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 22rpx;
				color: #6B738B;
				margin-top: 10rpx;
				.site {
					display: inline-block;
					width: 300rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.businessHours {
				margin-top: 16rpx;
				text {
					display: inline-block;
					font-weight: 500;
					font-size: 20rpx;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 8rpx;
				}
				.time {
					color: #A4A9B7;
					background: #F6F8FC;
				}
				.yy-state {
					color: #4BC264;
					background-color: #EDF9F0;
					margin-left: 24rpx;
				}
			}
			.shop-icons {
				margin-top: 16rpx;
				.icon {
					width: 40rpx;
					height: 40rpx;
					// background: #F7F8FA;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-right: 24rpx;
				}
			}
		}
	}
}


.kefu {
	width: 96rpx;
	height: 96rpx;
	background: #FFFFFF;
	border-radius: 50%;
	position: fixed;
	bottom: 200rpx;
	right: 32rpx;
}
</style>
